<template>
    <div class="hd-input" :class="{'before-line': beforeLine, 'after-line': afterLine,}">
        <div v-if="title" class="title">{{title}}</div>
        <div class="select-box">
            <div v-for="(option, index) in checkOptions"
                :key="index"
                class="item text-normal"
                @click="onClickOption(option)"
                :style="{ 'background': option.checked ? selectedBg : optionBg,
                'border': hasBr ? (option.checked ? '2rpx solid' + selectedBr : '2rpx solid' + defaultBr) : '2rpx solid transparent',
                'color': option.checked ? selectedColor : defaultColor,}">
                {{option.value.value}} {{option.value.price}}
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'PackageSelect',
    model: {
        prop: 'value',
        event: 'change',
    },
    props: {
        title: {
            type: String,
        },
        value: {
            type: String || Array,
            required: true,
        },
        options: {
            type: Array,
            required: true,
        },
        optionBg: {
            type: String,
            default: '#FFFFFF',
        },
        selectedBg: {
            type: String,
            default: '#FFFFFF',
        },
        hasBr: {
            type: Boolean,
            default: false,
        },
        defaultBr: {
            type: String,
            default: '#6A6A6A',
        },
        selectedBr: {
            type: String,
            default: '#044A8D',
        },
        defaultColor: {
            type: String,
            default: '#6A6A6A',
        },
        selectedColor: {
            type: String,
            default: '#B1B1B1',
        },
        beforeLine: {
            type: Boolean,
            default: false,
        },
        afterLine: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            currentValue: null,
        };
    },
    computed: {
        checkOptions() {
            if (Array.isArray(this.value)) {
                return this.options.map((item, index) => {
                    if (this.value.indexOf(item) !== -1) {
                        return {
                            value: item,
                            checked: true,
                        };
                    }
                    return {
                        value: item,
                        checked: false,
                    };
                });
            } else {
                return this.options.map((item, index) => {
                    if (this.value.id === item.id) {
                        return {
                            value: item,
                            checked: true,
                        };
                    }
                    return {
                        value: item,
                        checked: false,
                    };
                });
            }
        },
    },
    watch: {
        currentValue(val) {
            this.$emit('change', val);
            // console.log(this.value);
        },
    },
    methods: {
        onClickOption(option) {
            if (Array.isArray(this.value)) {
                const index = this.value.indexOf(option.value);
                this.currentValue = this.value;
                if (index === -1) {
                    this.currentValue.push(option.value);
                } else {
                    this.currentValue.splice(index, 1);
                }
                // console.log(this.currentValue);
            } else {
                this.currentValue = option.value;
            }
        },
    },
};
</script>
<style lang="less">
@import "../../lib/style/mixins.less";
.hd-input {
    position: relative;
    // padding: 36rpx 0;
    .title {
        .text-huge();
        margin-bottom: 26rpx;
    }
    .select-box {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .item {
            box-sizing: border-box;
            padding: 10rpx 24rpx;
            margin-top: 14rpx;
            margin-bottom: 14rpx;
            margin-right: 16rpx;
            border-radius: 10rpx;
        }
    }
}
</style>